Voorwaardelijke Type Inference: De 'infer' Keyword in TypeScript Meesteren

Het typesysteem van TypeScript biedt krachtige tools voor het creëren van robuuste en onderhoudbare code. Onder deze tools vallen voorwaardelijke typen op als een veelzijdig mechanisme voor het uitdrukken van complexe typrelaties. De infer keyword ontsluit specifiek geavanceerde mogelijkheden binnen voorwaardelijke typen, waardoor geavanceerde type-extractie en -manipulatie mogelijk wordt. Deze uitgebreide gids zal de complexiteit van infer verkennen en praktische voorbeelden en inzichten bieden om u te helpen de toepassing ervan onder de knie te krijgen.

Voorwaardelijke Typen Begrijpen

Voordat u in infer duikt, is het cruciaal om de grondbeginselen van voorwaardelijke typen te begrijpen. Met voorwaardelijke typen kunt u typen definiëren die afhankelijk zijn van een voorwaarde, vergelijkbaar met een ternaire operator in JavaScript. De syntax volgt dit patroon:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Hier, als type T toewijsbaar is aan type U, is het resulterende type X; anders is het Y.

Voorbeeld:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Dit eenvoudige voorbeeld laat zien hoe voorwaardelijke typen kunnen worden gebruikt om te bepalen of een type een string is of niet. Dit concept strekt zich uit tot complexere scenario's, wat de weg bereidt voor de infer keyword.

De 'infer' Keyword Introduceren

De infer keyword wordt gebruikt binnen de true branch van een voorwaardelijk type om een typevariabele te introduceren die kan worden afgeleid van het type dat wordt gecontroleerd. Dit stelt u in staat om specifieke delen van een type te extraheren en deze te gebruiken in het resulterende type.

Syntax:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

In deze syntax is R een typevariabele die wordt afgeleid van de structuur van T. Als T overeenkomt met het patroon, bevat R het afgeleide type en is het resulterende type X; anders is het Y.

Basisvoorbeelden van 'infer' Gebruik

1. Return Type van een Functie Afleiden

Een veelvoorkomende use case is het afleiden van het return type van een functie. Dit kan worden bereikt met het volgende voorwaardelijke type:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Uitleg:

• T extends (...args: any) => any: Deze constraint zorgt ervoor dat T een functie is.
• (...args: any) => infer R: Dit patroon komt overeen met een functie en leidt het return type af als R.
• R : any: Als T geen functie is, is het resulterende type any.

Voorbeeld:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number
            

              
                Copy
              
            
          

Dit voorbeeld demonstreert hoe ReturnType succesvol de return types van de functies greet en calculate extraheert.

2. Array Element Type Afleiden

Een andere veel voorkomende use case is het extraheren van het element type van een array:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Uitleg:

• T extends (infer U)[]: Dit patroon komt overeen met een array en leidt het element type af als U.
• U : never: Als T geen array is, is het resulterende type never.

Voorbeeld:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Dit laat zien hoe ElementType correct het element type van verschillende array types afleidt.

Geavanceerd 'infer' Gebruik

1. Parameters van een Functie Afleiden

Vergelijkbaar met het afleiden van het return type, kunt u de parameters van een functie afleiden met behulp van infer en tuples:

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Uitleg:

• T extends (...args: any) => any: Deze constraint zorgt ervoor dat T een functie is.
• (...args: infer P) => any: Dit patroon komt overeen met een functie en leidt de parametertypes af als een tuple P.
• P : never: Als T geen functie is, is het resulterende type never.

Voorbeeld:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters extraheert de parametertypes als een tuple, waarbij de volgorde en typen van de argumenten van de functie worden behouden.

2. Eigenschappen Extraheren uit een Object Type

infer kan ook worden gebruikt om specifieke eigenschappen uit een object type te extraheren. Dit vereist een complexer voorwaardelijk type, maar het maakt krachtige typemanipulatie mogelijk.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Uitleg:

• K in keyof T: Dit herhaalt over alle keys van type T.
• T[K] extends U ? K : never: Dit voorwaardelijke type controleert of het type van de eigenschap op key K (d.w.z. T[K]) toewijsbaar is aan type U. Als dat zo is, wordt de key K opgenomen in het resulterende type; anders wordt deze uitgesloten met behulp van never.
• De hele constructie creëert een nieuw object type met alleen de eigenschappen waarvan de typen U uitbreiden.

Voorbeeld:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}

type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }
            

              
                Copy
              
            
          

Met PickByType kunt u een nieuw type creëren dat alleen de eigenschappen van een specifiek type bevat uit een bestaand type.

3. Geneste Typen Afleiden

infer kan worden gekoppeld en genest om typen uit diep geneste structuren te extraheren. Overweeg bijvoorbeeld het extraheren van het type van het binnenste element van een geneste array.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Uitleg:

• T extends (infer U)[]: Dit controleert of T een array is en leidt het element type af als U.
• DeepArrayElement<U>: Als T een array is, roept het type recursief DeepArrayElement aan met het element type U.
• T: Als T geen array is, retourneert het type T zelf.

Voorbeeld:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Deze recursieve aanpak stelt u in staat om het type van het element op het diepste niveau van nesting in een array te extraheren.

Real-World Toepassingen

De infer keyword vindt toepassingen in verschillende scenario's waar dynamische typemanipulatie vereist is. Hier zijn enkele praktische voorbeelden:

1. Een Type-Veilige Event Emitter Creëren

U kunt infer gebruiken om een type-veilige event emitter te creëren die ervoor zorgt dat event handlers het juiste gegevenstype ontvangen.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}

const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });
            

              
                Copy
              
            
          

In dit voorbeeld gebruikt EventData voorwaardelijke typen en infer om het gegevenstype te extraheren dat is gekoppeld aan een specifieke event naam, waardoor wordt gegarandeerd dat event handlers het juiste type gegevens ontvangen.

2. Een Type-Veilige Reducer Implementeren

U kunt infer gebruiken om een type-veilige reducer-functie te creëren voor state management.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;

// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10
            

              
                Copy
              
            
          

Hoewel dit voorbeeld niet direct gebruik maakt van `infer`, legt het de basis voor complexere reducer-scenario's. `infer` kan worden toegepast om dynamisch het `payload`-type te extraheren uit verschillende `Action`-typen, waardoor strengere typecontrole binnen de reducer-functie mogelijk wordt. Dit is met name handig in grotere applicaties met talrijke acties en complexe state-structuren.

3. Dynamische Typegeneratie van API-Reacties

Wanneer u met API's werkt, kunt u infer gebruiken om automatisch TypeScript-typen te genereren uit de structuur van de API-reacties. Dit helpt de typeveiligheid te garanderen bij interactie met externe gegevensbronnen.

Beschouw een vereenvoudigd scenario waarbij u het gegevenstype wilt extraheren uit een generieke API-reactie:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User
            

              
                Copy
              
            
          

ExtractDataType gebruikt infer om het type U te extraheren van ApiResponse<U>, wat een type-veilige manier biedt om toegang te krijgen tot de datastructuur die door de API wordt geretourneerd.

Beste Praktijken en Overwegingen

• Duidelijkheid en Leesbaarheid: Gebruik beschrijvende typevariabelenamen (bijv. ReturnType in plaats van alleen R) om de codeleesbaarheid te verbeteren.
• Prestaties: Hoewel infer krachtig is, kan overmatig gebruik de typecontroleprestaties beïnvloeden. Gebruik het oordeelkundig, vooral in grote codebases.
• Foutafhandeling: Geef altijd een fallback type (bijv. any of never) in de false branch van een voorwaardelijk type om gevallen af te handelen waarin het type niet overeenkomt met het verwachte patroon.
• Complexiteit: Vermijd overdreven complexe voorwaardelijke typen met geneste infer statements, omdat deze moeilijk te begrijpen en te onderhouden kunnen worden. Refactor uw code indien nodig in kleinere, beter beheersbare typen.
• Testen: Test uw voorwaardelijke typen grondig met verschillende invoertypen om ervoor te zorgen dat ze zich gedragen zoals verwacht.

Globale Overwegingen

Wanneer u TypeScript en infer in een globale context gebruikt, overweeg dan het volgende:

• Lokalisatie en Internationalisering (i18n): Typen moeten mogelijk worden aangepast aan verschillende locales en dataformaten. Gebruik voorwaardelijke typen en `infer` om dynamisch verschillende datastructuren te hanteren op basis van locatiespecifieke vereisten. Datums en valuta's kunnen bijvoorbeeld in verschillende landen anders worden weergegeven.
• API-ontwerp voor wereldwijde doelgroepen: Ontwerp uw API's met wereldwijde toegankelijkheid in gedachten. Gebruik consistente datastructuren en formaten die gemakkelijk te begrijpen en te verwerken zijn, ongeacht de locatie van de gebruiker. Type definities moeten deze consistentie weerspiegelen.
• Tijdzones: Wees bij het omgaan met datums en tijden bewust van tijdzoneverschillen. Gebruik de juiste bibliotheken (bijvoorbeeld Luxon, date-fns) om tijdzoneconversies te verwerken en een nauwkeurige gegevensweergave in verschillende regio's te garanderen. Overweeg om datums en tijden in UTC-formaat weer te geven in uw API-reacties.
• Culturele Verschillen: Wees op de hoogte van culturele verschillen in gegevensrepresentatie en interpretatie. Namen, adressen en telefoonnummers kunnen bijvoorbeeld verschillende formaten hebben in verschillende landen. Zorg ervoor dat uw type definities deze variaties kunnen accommoderen.
• Valutaverwerking: Gebruik bij het omgaan met geldwaarden een consistente valutaweergave (bijvoorbeeld ISO 4217 valuta codes) en verwerk valutaconversies op de juiste manier. Gebruik bibliotheken die zijn ontworpen voor valutamanipulatie om precisieproblemen te voorkomen en nauwkeurige berekeningen te garanderen.

Overweeg bijvoorbeeld een scenario waarin u gebruikersprofielen uit verschillende regio's ophaalt en het adresformaat varieert op basis van het land. U kunt voorwaardelijke typen en `infer` gebruiken om de typedefinitie dynamisch aan te passen op basis van de locatie van de gebruiker:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format
            

              
                Copy
              
            
          

Door de `countryCode` op te nemen in het type `UserProfile` en voorwaardelijke typen te gebruiken op basis van deze code, kunt u het type `address` dynamisch aanpassen aan het verwachte formaat voor elke regio. Dit maakt type-veilige verwerking van diverse gegevensformaten in verschillende landen mogelijk.

Conclusie

De infer keyword is een krachtige toevoeging aan het typesysteem van TypeScript, waardoor geavanceerde typemanipulatie en -extractie binnen voorwaardelijke typen mogelijk wordt. Door infer te beheersen, kunt u robuustere, type-veilige en onderhoudbare code creëren. Van het afleiden van functieretourtypen tot het extraheren van eigenschappen uit complexe objecten, de mogelijkheden zijn enorm. Vergeet niet om infer oordeelkundig te gebruiken, waarbij u prioriteit geeft aan duidelijkheid en leesbaarheid om ervoor te zorgen dat uw code op de lange termijn begrijpelijk en onderhoudbaar blijft.

Deze gids heeft een uitgebreid overzicht gegeven van infer en de toepassingen ervan. Experimenteer met de voorbeelden, verken extra use cases en gebruik infer om uw TypeScript-ontwikkelingsworkflow te verbeteren.